import React, { useState, FC } from 'react';
import { Table } from '@/components';
import { TableUtils } from '@/utils';
import { Modal, Divider, Button, Form } from 'antd';
import { icon } from '@/config';

const { getColumns } = TableUtils;
const { confirm } = Modal;

interface ListProps {}

const List: FC<ListProps> = (props: any) => {
  const { spinning, fields, pagination, list, onChange, actions }: any = props;
  const edit = (releaseId: number, status: number) => {
    Modal.confirm({
      title: status === 1 ? '确认上架吗？' : '确认下架吗？',
      okType: 'danger',
      centered: true,
      onOk() {
        actions.fetchShelve({
          releaseId,
          status,
        });
      },
    });
  };

  // const publish = (releaseId: number) => {
  //   Modal.confirm({
  //     title: '确认发布吗？',
  //     centered: true,
  //     onOk() {
  //       actions.fetchPublish({
  //         releaseId,
  //       })
  //     },
  //   });
  // }

  // 移除
  const del = () => {
    Modal.confirm({
      title: '确认移除吗？',
      content: '移除操作会将商品从当前渠道下架，是否确认操作',
      okType: 'danger',
      centered: true,
      onOk() {
        console.log('OK');
      },
    });
  };

  // 同步库存
  // const update = (releaseId: number) => {
  //   Modal.confirm({
  //     title: '确认同步库存吗？',
  //     centered: true,
  //     onOk() {
  //       actions.fetchUpdateQty({
  //         releaseId,
  //       })
  //     },
  //   });
  // }

  const paginationProps = {
    ...pagination,
    showTotal: (tc: number) => `总共 ${tc} 条`,
  };

  const extraColumns = [
    {
      key: 'operate',
      name: '操作',
      width: 180,
      fixed: 'right',
      render: (text: any, { id, status, releaseStatus, skuCode }: any) => {
        // 发布状态(0.未发布;1.已发布) ,  上下架状态(1.上架;2.下架)
        return (
          <>
            {/* <span className="linkBtn" onClick={() => { publish(id) }}>发布</span> */}
            {releaseStatus === 1 ? (
              status === 2 ? (
                <>
                  {/* <Divider type="vertical" /> */}
                  <span
                    className="linkBtn"
                    onClick={() => {
                      edit(id, 1);
                    }}
                  >
                    上架
                  </span>
                </>
              ) : (
                <>
                  {/* <Divider type="vertical" /> */}
                  <span
                    className="linkBtn"
                    onClick={() => {
                      edit(id, 2);
                    }}
                    style={{
                      color: '#ff7875',
                    }}
                  >
                    下架
                  </span>
                </>
              )
            ) : (
              ''
            )}
            {/* <Divider type="vertical" /><span className="linkBtn" onClick={() => { update(id) }}>更新库存</span> */}
          </>
        );
      },
    },
  ];

  const tableProps = {
    scroll: { x: 1200 },
    rowKey: 'skuCode',
    columns: getColumns(fields)
      .extend(extraColumns)
      .values(),
    loading: spinning,
    dataSource: list,
    pagination: paginationProps,
    style: {
      marginTop: 20,
    },
    onChange,
  };

  return (
    <>
      <Table {...tableProps} />
    </>
  );
};

export default List;
